<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>xiaomi轮播</title>
    <link rel="stylesheet" href="css/xiaomi轮播.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.js"></script>
</head>
<body>
    <div class="swiper">
      <div class="swiper-content">
         <img src="images/1.jpg" alt="">
         <img src="images/2.webp" alt="">
         <img src="images/3.webp" alt="">
         <img src="images/4.webp" alt="">
         <img src="images/5.webp" alt="">
         <img src="images/6.webp" alt="">
      </div>
      <button id="left"></button>
      <button id="right"></button>
      <div id="btns">
        <span class="current"></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </div>
    </div>
    <script>
        let index =0;
        $("#right").click(function(){
            index++;
            if(index>4){
                index = 0;
            }
           animate(1000);
        })
        // 2.点击一下left index-- 达到下标志值
        $("#left").click(function(){
            index--;
            if(index<0){
                index = 4;
            }
           animate(1000);
        })
       
        // 点击焦点让对应下表的图片显示，重置下标值
        $("#btns span").click(function(){
            index = $(this).index();
           animate(1000);
        })

        function animate(speed){
            $(".swiper-content img").eq(index).fadeIn(speed).siblings().fadeOut(speed);
            $("#btns span").eq(index).addClass("current").siblings().removeClass("current");
        }
    </script>
</body>
</html>